import { Form, Modal, Input, Select, Checkbox, Row, Col, Cascader } from 'antd';
import { useEffect, useState } from 'react';

import commonService from '@/api/services/commonService';
import { toYuan, toFen } from '@/utils/format-number';

import SizePriceBlock from './components/sizePrice';
import GoodEditorModal from './GoodEditorModal/GoodEditorModal';
import goodsUtils from '@/utils/goodsUtils';

export function ProductModal({ title, show, formValue, onOk, onCancel, cateList }: any) {
  const [form] = Form.useForm();
  // const [cols, setCols] = useState([]);
  const { Group } = Checkbox;

  const [baseInfo, setBaseInfo] = useState<any>({});
  const { material, materialName, printType, supplier, suitFor, sizes, technology = [] } = baseInfo || {};
  const getInfo = async () => {
    commonService.getCustomApi('/common/baseProperty/getAllProperty', {}).then((res) => {
      console.log("baseInfo", res);
      setBaseInfo(res);
    });
  };


  useEffect(() => {
    if (show) {
      getInfo();
    }
  }, [show]);

  useEffect(() => {
    const sizeInfo = JSON.parse(formValue.sizeInfo || '{}');
    const baseSizePrice = JSON.parse(formValue.sizePrice || '[]');
    const sizePrice = baseSizePrice.length ? baseSizePrice.map((item: any) => {
      item.price = toYuan(item.price);
      return item;
    }) : baseInfo?.sizes?.map((item: string) => {
      return { size: item, price: 0 };
    });

    form.setFieldsValue({
      ...formValue,
      frontPrintFee: toYuan(formValue.frontPrintFee),
      backPrintFee: toYuan(formValue.backPrintFee),
      catalogueId: [formValue.catalogueId1, formValue.catalogueId],
      colors: JSON.parse(formValue.colors || '[]'),
      suitFor: JSON.parse(formValue.suitFor || '[]'),
      price: toYuan(formValue.price),
      sizePrice,
      sizeInfo,
    });
  }, [formValue, form]);

  const handleOk = async () => {
    let params = { ...formValue, ...form.getFieldsValue() };
    params = goodsUtils.tojson(params);
    await goodsUtils.repair(params); //修复并自动补充小程序需要的数据

    params = {
      ...params,
      frontPrintFee: toFen(params.frontPrintFee),
      backPrintFee: toFen(params.backPrintFee),
      suitFor: params.suitFor,
      colors: params.colors,
      catalogueId: params.catalogueId[1],
      price: toFen(params.price),
      sizePrice: (params.sizePrice || []).map((item: any) => {
        item.price = toFen(item.price);
        return item;
      }),
    }
    params = goodsUtils.toString(params);
    onOk(params);
  };

  return (
    <Modal
      title={title}
      width="90%"
      open={show}
      onOk={() => handleOk()}
      destroyOnClose
      onCancel={onCancel}
      centered
      maskClosable={false}
    >
      <div
        style={{
          height: '80vh',
          overflowY: 'auto'
        }}
      >
        <Form
          initialValues={formValue}
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          layout="horizontal"
        >
          <Form.Item<any> label="适用人群" name="suitFor" required>
            <Group
              options={suitFor?.map((item: any) => ({ label: item.name, value: Number(item.value) }))}
            />
          </Form.Item>
          <Form.Item<any> label="分类" name="catalogueId" required>
            <Cascader options={cateList} fieldNames={{ label: 'name', value: 'id', children: 'sonList' }} />
          </Form.Item>
          <Form.Item<any> label="商品名称" name="name" required>
            <Input />
          </Form.Item>
          <Row>
            <Col span={8}>
              <Form.Item<any> label="商品SKU" name="sku" required>
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="商品SPU" name="spu">
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="供应商" name="supplier" required>
                <Select options={supplier?.map((item: string) => ({ label: item, value: item }))} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="重量" name="weight" required>
                <Input suffix="克" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="性别" name="sex" required>
                <Input />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="面料" name="material" required>
                <Select
                  options={materialName?.map((item: string) => ({ label: item, value: item }))}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="面料材质" name="materialName" required>
                <Select options={material?.map((item: string) => ({ label: item, value: item }))} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="前面印刷费用" name="frontPrintFee" required>
                <Input suffix="元" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="背面印刷费用" name="backPrintFee" required>
                <Input suffix="元" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="面料克重" name="fabricWeight" required>
                <Input suffix="克" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="印刷方式" name="fillType" required>
                <Select
                  options={printType?.map((item: any) => ({ label: item.name, value: item.value }))}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="二次工艺名称" name="technology" required>
                <Select
                  options={technology?.map((item: any) => ({ label: item.name, value: item.value }))}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="面料门幅" name="fabricDoorWidth" required>
                <Input suffix="CM" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item<any> label="款号" name="styleNumber" required>
                <Input />
              </Form.Item>
            </Col>
            {/* <Col span={8}>
              <Form.Item<any> label="价格" name="price" required>
                <Input />
              </Form.Item>
            </Col> */}
          </Row>

          {/* <Form.Item<any> label="商品颜色" name="colors" required>
          <ColorBlock />
        </Form.Item> */}
          <Form.Item<any> label="商品价格" name="sizePrice" required>
            <SizePriceBlock sizes={sizes?.map((item: any) => ({ label: item, value: item }))} />
          </Form.Item>
          {/* <SizeInfoBlock cols={cols} /> */}
        </Form>
        {show && <GoodEditorModal goodsData={formValue} />}
      </div>
    </Modal>
  );
}
